<template>
  <div id="paymap">
    <div class="payheard" v-if="payshow">
      <p class="icon iconfont icon-dui"></p>
      <span>订单已提交，请24小时完成支付</span>
      <strong>(逾期订单将被取消)</strong>
      <div class="payaddr">
        <span>送货至：</span>
        <strong>{{name}} {{addr}} 手机号 :{{phone}}</strong>
      </div>
      <ul class="zhifumoney">
        <li>
          <span>应付金额:</span>
          <strong>{{allmoney}}</strong>
          <i>(在线支付)</i>
        </li>
        <li>订单编号:{{number}}</li>
      </ul>
    </div>
    <div class="zhifuping" v-if="payshow">
      <h3>支付平台</h3>
      <div class="payaway">
        <input type="radio" name="payway" />
        <span>
          <img src="../assets/images/zhifubao.jpg" alt />
        </span>
        <input type="radio" name="payway" />
        <span>
          <img src="../assets/images/smallWXPay.jpg" alt />
        </span>
        <input type="radio" name="payway" />
        <span>
          <img src="../assets/images/yinlian.png" alt />
        </span>
        <input type="radio" name="payway" />
        <span>余额支付：(500)</span>
      </div>
      <div class="computerpay">
        <ul class="payul">
          <li class="lifrist">
            <p>使用电脑支付</p>
            <img src="../assets/images/diannaozhifu.png" alt />
            <button @click="yesshow">立即支付</button>
          </li>
          <li class="litwo">或</li>
          <li>
            <p>使用支付宝钱包扫一扫</p>
            <img src="../assets/images/payCode.jpg" alt />
          </li>
        </ul>
        <ul class="payul">
          <li class="lifrist">
            <img class="lifristimg" src="../assets/images/weixinPay.jpg" alt />
          </li>
          <li class="litwo"></li>
          <li>
            <p>使用微信钱包扫一扫</p>
            <img src="../assets/images/payCode.jpg" alt />
          </li>
        </ul>
      </div>
    </div>
    <div class="payheard1" v-if="successshow">
      <p class="icon iconfont icon-dui"></p>
      <p>支付成功</p>
      <div class="payheardbtn">
          <router-link to="" class="look">查看订单</router-link>
          <router-link to="/index" class="back">返回首页</router-link>
      </div>
      <div class="ordernumber">
          <span>订单编号：</span>
          <strong>1111111111111</strong>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "小可爱",
      addr: "北京市 朝阳区 天安门 城楼拱门旁",
      phone: "18838979821",
      allmoney: 11000,
      number: 11111111111,
      payshow: true,
      successshow:false,
    };
  },
  methods: {
    yesshow() {
      this.payshow = false;
       this.successshow = true;
      
    }
  }
};
</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#paymap {
  width: 80%;
  margin: auto;
  margin-top: 20px;
}
.payheard {
  font-size: 18px;
}
.payheard1 {
  width: 100%;
  height:350px;
  
}
.payheard1 p {
  font-size: 40px;
  color: #f08200;
  line-height: 60px;
  
}
.payheard p {
  font-size: 40px;
  color: #f08200;
  line-height: 120px;
}
.payheardbtn{
    width:100%;
    margin-top:30px;
    margin-bottom: 30px;
}
.payheardbtn a{
    display: inline-block;
    width:12%;
    font-size: 18px;
    text-decoration: none;
    color:#fff;
    line-height: 30px;
    background:#f08200;
    
}
.payheardbtn .back{
    margin-left:6%;
    background:#498e3d;
}
.payheard strong {
  font-weight: inherit;
  color: #f08200;
}
.payaddr {
  width: 100%;
  text-align: left;
  border: 1px solid #e5e5e5;
  background: #f4fff2;
  margin-top: 50px;
  line-height: 35px;
}
.payaddr strong {
  color: #333;
}
.zhifumoney {
  width: 100%;
  margin: 0px;
  margin: 20px 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.zhifumoney strong {
  color: #d20a11;
}
.zhifuping {
  width: 100%;
}
.zhifuping h3 {
  width: 100%;
  line-height: 55px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  margin-bottom: 20px;
}
.payaway {
  width: 100%;
  text-align: left;
}
.payaway input {
  font-size: 25px;
}
.payaway span {
  display: inline-block;
  width: 10%;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #e5e5e5;
}
.payaway span img {
  width: 100%;
  height: 100%;
  font-size: 0px;
}
.computerpay {
  width: 100%;
  margin-top:20px;
  margin-bottom: 25px;
}
.payul {
  list-style: none;
  height: 350px;
  border: 1px solid #e5e5e5;
  display: flex;
  padding-top: 20px;
  justify-content: center;
  margin-top: 20px;
}
.payul .lifrist {
  width: 25%;
  height: 100%;
}

.payul .lifrist img {
  width: 80%;
  margin-bottom: 15px;
}
.payul .lifrist button {
  width: 50%;
  line-height: 30px;

  color: #fff;
  background: #f08200;
  border: none;
}
.litwo {
  width: 10%;
  height: 100%;
  line-height: 300px;
}

.lifristimg {
  width: 100%;
  height: 100%;
}
</style>